<template>
	<div ref="chart" style="width: 40%; height: 100%"></div>
</template>

<script>
import * as echarts from 'echarts';
export default {
	name: 'line',
	props: {
		rightType: {
			type: Number,
			default: function (e) {
				return 0;
			},
		},
	},
	// watch: {
	// 	rightType: {
	// 		deep: true, // 深度监听，确保对象内部的数据变化也能触发
	// 		handler(newVal) {
	// 			this.commandstats.dispose();
	// 			this.initChart();
	// 		},
	// 	},
	// },
	created() {},
	mounted() {
		// const myChart = echarts.init(this.$refs.chart);
		// window.addEventListener('resize', function () {
		// 	myChart.resize();
		// });
		this.initChart();
	},
	data() {
		return {
			// 统计命令信息
			commandstats: null,
		};
	},
	methods: {
		initChart() {
			let randomNumber = Math.floor(Math.random() * 10) + 1;
			let num = 10;
			var fontColor = '#5072a4';
			console.log(randomNumber);
			const chartDom = this.$refs.chart;

			const option = {
				backgroundColor: '',
				title: [
					{
						text: '75.0%',
						x: '50%',
						y: '43%',
						textAlign: 'center',
						textStyle: {
							fontSize: '14',
							fontWeight: '500',
							color: '#98b5d2',
							textAlign: 'center',
						},
					},
				],

				angleAxis: {
					max: 100,
					clockwise: false,
					axisLine: {
						show: false,
					},
					axisTick: {
						show: false,
					},
					axisLabel: {
						show: false,
					},
					splitLine: {
						show: false,
					},
				},
				radiusAxis: {
					type: 'category',
					axisLine: {
						show: false,
					},
					axisTick: {
						show: false,
					},
					axisLabel: {
						show: false,
					},
					splitLine: {
						show: false,
					},
				},
				polar: {
					center: ['50%', '50%'],
					radius: '185%',
				},
				series: [
					{
						type: 'bar',
						startAngle: 100,
						clockwise: false,
						data: [
							{
								name: 'Total Downloads',
								value: 80,
								itemStyle: {
									normal: {
										color: '#5886f0',
									},
								},
							},
						],
						coordinateSystem: 'polar',
						roundCap: true,
						barWidth: '10',
						barGap: '100%',
						z: 20,
					},

					{
						name: '',
						z: 1,
						type: 'pie',
						clockwise: false,
						cursor: 'default',
						center: ['50%', '50%'],
						radius: ['93%', '93%'],
						itemStyle: {
							color: '#5886f0',
							borderColor: '#5886f0',
							borderWidth: 1,
						},
						hoverAnimation: true,
						legendHoverLink: true,
						labelLine: {
							normal: {
								show: false,
							},
						},
						data: [
							{
								value: 100,
								itemStyle: {
									color: '#405b7f',
								},
							},
						],
					},
				],
			};

			this.commandstats = echarts.init(chartDom, 'macarons');
			this.commandstats.setOption(option);
		},
	},
};
</script>
<style scoped lang="scss">
.mapDom {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
}

.echarts {
	display: flex;
	align-items: center;

	.echartsLeft {
		width: auto;
		background-image: linear-gradient((#063053, 0.3), (#395873, 0.3), (#5c7c99.3));
	}

	.echartsRight {
		width: auto;
		background-color: #000;
	}

	.echartsCenter {
		flex: 1;
		background-color: #000;
	}
}
</style>
